<template>
  <div class="cart-bottom">
    <check-box-button :is-checked="isSelectAll" @changCheck="changAllCheck">
      全选
    </check-box-button>
    <div class="cart-bottom-money">合计：<span>￥{{ totalMoney }}</span></div>
    <div class="cart-bottom-button">
      <button type="button" @click="settleAccounts">结算</button>
    </div>
  </div>
</template>

<script>
import CheckBoxButton from "./CheckBoxButton";

export default {
  name: "CartBottom",
  props: {
    isSelectAll: {
      type: Boolean,
      default: false
    },
    totalMoney: {
      type: [Number, String],
      default: 0
    },
  },
  components: {
    CheckBoxButton
  },
  data() {
    return {
      msgIndex: null
    }
  },
  methods: {
    changAllCheck() {
      this.$store.dispatch("changeAllCheck", this.isSelectAll);
    },
    settleAccounts() {
      this.$layer.close(this.msgIndex);
      if (this.totalMoney <= 0) {
        this.msgIndex = this.$layer.msg("您还没有选择宝贝哦", {time: 1})
        return;
      }
      this.msgIndex = this.$layer.msg("结算功能开发中...", {time: 1});
    }
  }
}
</script>

<style scoped>
.cart-bottom {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: var(--color-background);
  box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.1);
  text-align: right;
  padding: 0 5px;
  font-size: var(--font-size);
}

.cart-bottom div {
  flex: 1;
}

.cart-bottom .cart-bottom-money span {
  color: orangered;
}

.cart-bottom .cart-bottom-button button {
  color: #fff;
  padding: 5px 25px;
  border-radius: 25px;
  border: none;
  background-color: orangered;
}
</style>